<template>
  <div class="search_container">
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>系统管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card shadow="always">
      <el-button type="text" @click="openWin">
        + 新增
      </el-button>

      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="用户名称">
          <el-input v-model="formInline.username" placeholder="用户名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSearch">查询</el-button>
        </el-form-item>
      </el-form>
      <el-table
          :data="myDatas"
          border
          style="width: 100%">
        <el-table-column
            prop="loginUserId"
            label="登录用户标识"
            v-if="false"
        >
        </el-table-column>
        <el-table-column
            prop="username"
            label="用户名"
        >
        </el-table-column>
        <el-table-column
            prop="lastLoginTime"
            label="上次登录时间"  >
        </el-table-column>
        <el-table-column
            prop="createTime"
            label="创建时间"
        >
        </el-table-column>
        <el-table-column
            prop="roles"
            label="角色"
        >
        </el-table-column>
        <el-table-column
            prop="statusCd"
            label="状态"
        >
        </el-table-column>
        <el-table-column
            prop="password"
            label="密码"
            v-if="false"
        >
        </el-table-column>
        <el-table-column  label="操作">
          <template slot-scope="scope">
            <div style="display: flex;">
              <el-button
                  size="mini"
                  @click="handleEdit(scope.row)">编辑</el-button>
              <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.row)">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <div style="margin-top: 20px; text-align: left;">
          <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[5, 10, 20, 50]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
          ></el-pagination>
        </div>
      </div>
      <el-dialog
          title="增加用户"
          :visible.sync="dialogVisible"
          width="50%">
        <!--        图书表单信息-->
        <el-form ref="form" :inline="true" :rules="rules" :model="form" label-width="80px">
          <el-form-item label="用户名" prop="username">
            <el-input placeholder="请输入用户名" v-model="form.username"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input type="password" placeholder="请输入密码" v-model="form.password"></el-input>
          </el-form-item>
          <el-form-item label="角色" prop="roles">
            <el-input  placeholder="请输入角色" v-model="form.roles"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="handleSubmit">确 定</el-button>
  </span>
      </el-dialog>
      <el-dialog
          title="编辑用户"
          :visible.sync="bookVisible"
          width="50%">
        <!--        图书表单信息-->
        <el-form ref="form" :inline="true" :rules="rules" :model="form" label-width="80px">
          <el-form-item label="登录用户标识" prop="loginUserId" v-if="false">
            <el-input placeholder="请输入登录用户标识" v-model="form.loginUserId"></el-input>
          </el-form-item>
          <el-form-item label="用户名" prop="username">
            <el-input placeholder="请输入用户名" v-model="form.username"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input type="password" placeholder="请输入密码" v-model="form.password"></el-input>
          </el-form-item>
          <el-form-item label="角色" prop="roles">
            <el-input  placeholder="请输入角色" v-model="form.roles"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
    <el-button @click="bookVisible = false">取 消</el-button>
    <el-button type="primary" @click="handleSubmit">确 定</el-button>
  </span>
      </el-dialog>
    </el-card>
  </div>
</template>
<script>
import {addLoginUser, delLoginUser, getLoginUserPageData} from '../../api/system/system';
import moment from 'moment';
export default {
  data() {
    return {
      dialogVisible: false,
      bookVisible: false,
      formInline: {
        username: '',
        page:null,
        limit:null
      },
      form:{
        username: "",
        roles: "",
        loginUserId: "",
        password:''
      },
      rules: {
        username:[ { required: true, message: '请输入用户名', trigger: 'blur' },],
        roles:[ { required: true, message: '请输入角色', trigger: 'blur' },],
        password:[ { required: true, message: '请输入密码', trigger: 'blur' },],
      },
      myDatas: [],
      currentPage: 1, // 当前页
      total: 0, // 数据总条数
      pageSize: 10, // 每页条数
      loading: true,
    };
  },mounted() {
    this.getLoginUsersPage(this.formInline);
  },
  methods: {
    openWin(){
      this.dialogVisible = true;
      this.form.username = '';
      this.form.roles = '';
      this.form.loginUserId = '';
      this.form.password = '';
      if (this.$refs.addForm) {
        this.$refs.addForm.reset();
      }
    },
    //页面初始化，调用接口，入参是page=1&size=10
    getLoginUsersPage(params){
      getLoginUserPageData(params).then((response)=>{
        this.myDatas =response.content;
        this.total = response.content.length;
      });
    },
    //点击查询按钮，掉用接口
    onSearch(){
      const formData = this.formInline;
      getLoginUserPageData(formData).then((response)=>{
        this.myDatas =response.content;
        this.total = response.content.length;
      });
    },
    // 点击分页里的按钮，显示分页数据
    getAccountListByPage() {
      // 收集当前页码 和 每页显示条数
      const formData = this.formInline;
      formData.page = this.currentPage
      formData.size = this.pageSize
      // 发送ajax请求 把分页数据发送给后端
      getLoginUserPageData(formData).then(response => {
        console.log("对应页码的数据:", response);
        // 赋值给对应的变量即可
        this.total = response.total;
        this.myDatas = response.content;
        // 如果当前页没有数据 且 排除第一页
        if (!response.content.length && this.currentPage !== 1) {
          // 页码减去 1
          this.currentPage -= 1;
          // 再调用自己
          this.getAccountListByPage();
        }
      })
          .catch(err => {
            console.log(err);
          });
    },
    // 每页显示条数改变 就会触发这个函数
    handleSizeChange(val) {
      // 保存每页显示的条数
      this.pageSize = val;
      // 调用分页函数
      this.getAccountListByPage();
    },
    // 当前页码改变 就会触发这个函数
    handleCurrentChange(val) {
      // 保存当前页码
      this.currentPage = val;
      // 调用分页函数
      this.getAccountListByPage();
    },
    //点击新增按钮，进行数据提交
    handleSubmit(){
      console.log(this.form.loginUserId);
      this.$refs.form.validate(valid => {
        if (valid) {
          // 构造要提交的数据对象
          const data = {
            loginUserId:this.form.loginUserId,
            username: this.form.username,
            roles: this.form.roles,
            password: this.form.password,
          };
          addLoginUser(data).then((response)=>{
            this.$message({
              type: 'success',
              message: '新增数据成功'
            });
            // 刷新页面
            window.location.reload();
          })

        }
      })
    },
    //点击数据每行的删除按钮
    handleDelete(item){
      console.log(item);
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delLoginUser({ id: item.loginUserId }).then((response) => {
          const index = this.myDatas.indexOf(item);
          this.myDatas.splice(index, 1);
        })
        this.$message({
          type: 'success',
          message: '删除数据成功'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //点击编辑按钮，进行修改数据
    handleEdit(item){
      this.bookVisible = true;
      this.form.loginUserId = item.loginUserId;
      this.form.username = item.username;
      this.form.roles = item.roles;
      this.form.password = item.password;
    },


  },computed:{

  },
  created() {
    // this.searchBookBorrowByPage();
  },
};


</script>